import React,{Component} from "react";
import {Modal, Form, Input, Button} from "antd";
import {IUser} from "./userList";
import { FormInstance } from 'antd/lib/form';

const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
interface IProps {
    visible : boolean
    callback : (visible : boolean, user ?: IUser) => void
    user ?: IUser
}

export default class EditUser extends Component<IProps, any>{

    formRef
    constructor(props: IProps, context: any) {
        super(props, context);
        this.formRef = React.createRef<FormInstance>();
    }

    handleOk= (user:any)=> {
        this.props.callback(false,{...this.props.user,...user})
    }
    handleCancel =()=>{
        this.props.callback(false)
    }
    saveUser =(user:IUser)=>{
        this.props.callback(false,{...this.props.user,...user})
    }

    render() {
        console.log(this.props.user)
        this.formRef.current?.setFieldsValue({ ...this.props.user })
        return (
            <div>
                <Modal title="Basic Modal" visible={this.props.visible} onOk={this.handleOk} onCancel={this.handleCancel}
                       footer={null}>
                    <Form  ref={this.formRef}
                           onFinish={this.saveUser}
                        initialValues={{
                        ...this.props.user
                    }}>
                        <Form.Item label="name" name = "name"
                                   shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Button type="primary" htmlType="submit">
                                Submit
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}
